<template>
  <div class="pageContent" :class="[isScreen&&'pt50']">
    <fullScreen v-model="isScreen" :list="screenList.arr" :loop="false"></fullScreen>
    <div class="inner-padding pt20">
      <main-nav />
      <div class="work clearfix">
        <work-item @click="onClick" :item="item" v-for="(item,i) in list" :key="i"/>
      </div>
    </div>
  </div>
</template>
<script>
import { onMounted, ref, computed, watch, inject, reactive, toRef, toRefs } from 'vue'
import fullScreen from './components/fullScreen'
import mainNav from './components/main-nav'
import workItem from './components/work-item'
import { useRoute, useRouter, onBeforeRouteUpdate  } from "vue-router";
import { useStore } from "vuex";
import { testApi } from "@/api";

export default {
  components: {
    fullScreen,
    mainNav,
    workItem
  },
  setup(props){
    const store = useStore()
    const params = ref()
    const reload = inject('reload')
    const isScreen = ref(false)

    onMounted(()=>{
    })

    onBeforeRouteUpdate( (to, from) => {
      // params.value = to.params
      reload()
    });

    const list = reactive([])
    testApi().then(res=>{
      list.push(...res.data)
    })

    const screenList = reactive({
      arr: []
    })

    const onClick = () => {
      isScreen.value = true
      testApi(1,3,{},3).then(res=>{
        screenList.arr = res.data
      })
    }

    return {
      list,
      screenList,
      onClick,
      isScreen,
    }
  }
}
</script>
<style lang="less" scoped>
.inner-padding{
  width: 100%;
  overflow-x: hidden;
}
.work{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  .margin-top(100px);
  width: calc(calc(100% + 36px + @calc));
  @media @max768{
    .margin-top(50px);
    width: calc(calc(100% + 20px + @calc));
  }
}
</style>